import { h, ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { NSpace, NButton } from 'naive-ui'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'

export function useColumns(onCallback: Function) {
  const t = window.$t

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('dataManage.datasourceType'),
        key: 'datasourceType',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.datasourceName'),
        key: 'name',
        align: 'center',
        className: 'name',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.description'),
        key: 'description',
        align: 'center',
        width: 150
      },
      {
        title: t('dataManage.host'),
        key: 'host',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('dataManage.port'),
        key: 'port',
        align: 'center',
        width: 60
      },
      {
        title: t('dataManage.dbName'),
        key: 'dbName',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['name']
      },
      {
        title: t('common.createTime'),
        key: 'createTime',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('common.updateTime'),
        key: 'updateTime',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['time']
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](8),
        render: (rowData: any, unused: number) => {
          return h(NSpace, null, {
            default: () => [
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'syncMeta'),
                  quaternary: true,
                  type: 'info',
                  size: 'small'
                },
                t('dataManage.syncMeta')
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'connTest'),
                  quaternary: true,
                  type: 'info',
                  size: 'small'
                },
                t('dataManage.connTest')
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'modDatasource'),
                  quaternary: true,
                  type: 'info',
                  size: 'small'
                },
                t('common.modify')
              ),
              h(
                NButton,
                {
                  onClick: () => void onCallback({ rowData }, 'delDatasource'),
                  quaternary: true,
                  type: 'error',
                  size: 'small'
                },
                t('common.delete')
              )
            ]
          })
        }
      }
    ] as TableColumns
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }

  onMounted(() => {
    createColumns()
  })

  watch(useI18n().locale, () => {
    createColumns()
  })

  return {
    columnsRef,
    createColumns
  }
}
